<template>
  <view class="collect">

    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>

    <view v-if="current == 0 && userSaveGamer.length!=0" class="gamer">
      <view @click="toUserDetail(item)" class="item" v-for="(item,index) in userSaveGamer" :class="[bgChangeColor]">
        <view class="avatar">
          <image mode="aspectFill" :src="IMG_URL + item.avatar"></image>
        </view>
        <view class="msg">
          <view class="txt" :class="txtColor">
            <view style="font-size: 56rpx">{{ item.name }}</view>
            <view style="font-size: 36rpx">{{ item.age }}岁</view>
          </view>
          <view class="tag">
            <view :class="[bgColor]" v-for="(item1,index) in item.labels">{{ item1 }}</view>
          </view>
        </view>
      </view>
    </view>

    <view v-else-if="current == 1 && userSaveBusiness.length!=0" class="shop">
      <view @click="toShopItem(item.id)" class="item" v-for="(item,index) in userSaveBusiness">
        <view class="img">
          <image :src="IMG_URL + item.cover" mode="aspectFill"></image>
        </view>
        <view class="msg" :class="[bgChangeColor]">
          <view class="top">
            <view class="top-txt1">
              <view class="logo">
                <image src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00556-3606.jpg"
                       mode="aspectFit"></image>
              </view>
              <view>{{ item.name }}</view>
            </view>
            <!--            <view   style="padding: 0rpx 20rpx"> -->
            <!-- <u-icon size="50" :name="isBoy?'/static/image/userDetails/boyColl.png':'/static/image/userDetails/girlColl.png'"></u-icon> -->
            <!--              <u-icon v-else size="50" :name="isBoy?'/static/image/userDetails/boyCollFill.png':'/static/image/userDetails/girlCollFill.png'"></u-icon>-->
            <!--            </view> -->
          </view>
          <view class="tag">
            <view class="tag-item" :class="[bgColor]" v-for="(item1,index) in item.labels">{{ item1 }}</view>
          </view>
          <view class="adr">地址:{{ item.address }}</view>
        </view>
      </view>
    </view>
    <u-empty style="margin-top: 50%" v-else text="暂无收藏" mode="list"></u-empty>
  </view>
</template>

<script>
import {IMG_URL} from "../../config/URL";

export default {
  onLoad(options) {
    // 接收上一个页面传递的数据
    let result = JSON.parse(decodeURIComponent(options.data))
    this.userSaveGamer = result.userSaveGamer
    this.userSaveBusiness = result.userSaveBusiness
  },
  name: "index",
  data() {
    return {
      IMG_URL,
      list: [{
        name: '用户'
      }, {
        name: '商家'
      },
      ],
      userSaveGamer: [],
      userSaveBusiness: [],
      current: 0,
      gender: '男'
    }
  },
  computed: {
    isBoy() {
      return this.gender == '男'
    },
    bgChangeColor() {
      let gender = (this.gender == '男' ? 'boy' : 'girl')
      return `${gender}-bg`
    },
    txtColor() {
      let color = (this.gender == '男' ? 'blue' : 'red')
      return `zy-dark-${color}`
    },
    bgColor() {
      let color = (this.gender == '男' ? 'blue' : 'red')
      return `zy-dark-bg-${color}`
    },
  },
  methods: {
    change(index) {
      this.current = index;
    },

    //传入互娱师id 跳转到互娱师下单页面
    toUserDetail(item) {
		let data = {
				gamer: item,
		  Userid: item.id,
		}
		uni.navigateTo({
		  // 参数传递
		  url: "/pages/user/userDetails?data=" + encodeURIComponent(JSON.stringify(data))
		})
    },

    //传入商家数据 跳转到商家详情界面
    toShopItem(id) {
      let data = {
        businussId: id
      }
      uni.navigateTo({
        url: "/subPages/subShops/shopItem/index?data=" + encodeURIComponent(JSON.stringify(data))
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/lib/css/color.scss";

.collect {
  min-height: 100vh;
  padding: 10rpx;
  display: flex;
  flex-direction: column;
  .gamer {
    margin-top: 10rpx;

    .item {
      display: flex;
      border-radius: 10rpx;
      overflow: hidden;
      height: 200rpx;
      margin-bottom: 20rpx;

      .avatar {
        flex: 2;

        image {
          border-radius: 10rpx;
          width: 100%;
          height: 100%;
        }
      }

      .msg {
        flex: 5;
        margin-left: 20rpx;

        .txt {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
        }

        .tag {
          display: flex;

          view {
            font-size: 24rpx;
            color: white;
            padding: 8rpx;
            border-radius: 11rpx;
            margin-right: 20rpx;
          }
        }
      }
    }
  }

  .shop {
    .item {
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      height: 500rpx;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin-bottom: 30rpx;
    }

    .img {
      flex: 1.8;
      background-color: #00bdf1;

      image {
        height: 100%;
        width: 100%;
      }
    }

    .msg {
      flex: 1;
      background-color: #3F536E;
      padding: 10rpx;

      .top {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;

        .top-txt1 {
          flex: 1;
          display: flex;
          font-size: 40rpx;
          font-weight: bold;

          .logo {
            height: auto;
            width: 100rpx;

            image {
              height: 100%;
              width: 100%;
            }
          }
        }

        .top-txt2 {
          padding: 0rpx 40rpx;
          border-radius: 50rpx;
          height: 40rpx;
          color: white;
        }
      }

      .tag {
        color: white;
        display: flex;
        margin-top: 15rpx;
        padding-left: 100rpx;
        flex-wrap: wrap;

        .tag-item {
          border-radius: 10rpx;
          padding: 5rpx 10rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      }

      .adr {
        margin-top: 5rpx;
        padding-left: 100rpx;
      }
    }
  }
}
</style>
